<template>
	<view class="bgs">
		<view @click="register" class="handle"></view>
		<!-- <img src="../../static/images/3.jpg" alt=""> -->
		<img src="../../static/images/home/14.png" />
		<view class="infos1">
			<img class="line" src="../../static/images/home/15.png" alt="">
			<img class="tit2" src="../../static/images/home/16.png" alt="">
			<view class="words">
				<view class="">
					1、先获取<text>保存一张</text>属于自己的<text>推广海报</text>
				</view>
				<view class="">2、将活动海报
					<text>分享给其他微信用户</text>
				</view>
				<view class="">3、用户通过你分享的海报进来参与任务,你就可以获得
					<text>3-99元现金红包</text>
				</view>
				<view class="">4、你邀请的用户邀请其他用户参与活动，你也可以获得
					<text>3-99元现金红包</text>
				</view>
				<view class="">5、每天最高上限
					<text>可领取5000元</text>
					，提现无任何限制，
					<text>秒到帐</text>
					！
				</view>
			</view>
			<view @click="register" class="btns">
				获取海报
			</view>
		</view>
		<u-popup :closeable="true" mode="top" v-model="show" @close="close">
			<view>
				<view class="poster">
					<scroll-view style="width: 100%; height: 100%;" scroll-y="true">
						<canvas canvas-id="myCanvas" id="sss"></canvas>
						<img @click="download" :src="base64" mode="" v-if="base64" class="immm" />
					</scroll-view>
				</view>
			</view>
		</u-popup>



		<div style="opacity: 0; position: absolute; bottom: 0;">

			<yz-qr :qrPath.sync="qrPath" :text="vuex_promotionCode8" :size="size" :quality="quality"
				:colorDark="colorDark" :colorLight="colorLight"></yz-qr>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrPath: '',
				size: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				base64: "",
				ewm: '', //线上图片
				bg_img3:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F55574424%2F954bb2f211c321fddf6d2a0d19fe52ac.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTU1NzQ0MjQvOTU0YmIyZjIxMWMzMjFmZGRmNmQyYTBkMTlmZTUyYWMuanBn%2Fsign%2F1d7ab0f2ac7034ff73db2c626595d5ec.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709558807&t=ac346f7e8168e10a60e8ac7358dd38c3",
				// bg_img3: "../../game/static/images/home/Ellipse 176.png",
				bg_img: "../../game/static/images/home/18.png",
				background: {
					backgroundColor: '#252525',
				},
				show: false,
				info: {},
				id: ''
			}
		},
		methods: {
			
			close(){
				this.base64  =''
			},
			//下载图片到本地
						download(){
							uni.downloadFile({
								url: this.base64, //仅为示例，并非真实的资源
								success: (res) => {
									console.log(res)
									if (res.statusCode === 200) {
										console.log('下载成功');
										var oA = document.createElement("a");
											oA.download = ''; // 设置下载的文件名，默认是'下载'
											oA.href = res.tempFilePath; //临时路径再保存到本地
											document.body.appendChild(oA);
											oA.click();
											oA.remove(); // 下载之后把创建的元素删除
									}
							
								}
							});
			 
						},
			make_canvas(img01, img02, img03) {

				console.log(img01, img02, 888888888);
				var system_info = this.system_info;

				let ww = system_info.windowWidth; //准确的宽高
				let hh = system_info.windowHeight;

				var ctx = uni.createCanvasContext("myCanvas"); //绑定画布
				
				ctx.drawImage(img01.tempFilePath, 0, 0, ww, hh); //填充进图片
				
				ctx.setFontSize(19);
						ctx.setFillStyle("#474747");
						ctx.fillText('@ '+this.vuex_nickname8, 160, 230);
				
				// ctx.drawText('嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻', 200, 160, 90, 60); //填充进图片
				// ctx.drawImage(img03.tempFilePath, 170, 140, 65, 65); //填充进图片
				
				
				//绘制的头像宽度
				let avatarurl_width = 65
				//绘制的头像高度
				let avatarurl_heigth = 65
				//绘制的头像在画布上的位置
				let avatarurl_x = 171
				//绘制的头像在画布上的位置
				let avatarurl_y = 140
				  
				// 绘制头像
				ctx.save()
				// 开始创建一个路径
				ctx.beginPath()
				// 画一个圆形裁剪区域
				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false)
				// 裁剪
				ctx.clip()
				// 绘制图片
				ctx.drawImage(img03.tempFilePath, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
				// 恢复之前保存的绘图上下文
				ctx.restore()
				
				
				
				
				
				ctx.drawImage(img02.tempFilePath, 130, 300, 150, 150); //填充进图片

				// 新春福利



				ctx.draw(); //输出到画布中
				uni.showLoading({
					//增加loading等待效果
					mask: true,
				});
				setTimeout(() => {
					//不加延迟的话，base64有时候会赋予undefined
					uni.canvasToTempFilePath({
						canvasId: "myCanvas",
						success: (res) => {
							this.base64 = res.tempFilePath;
						},
					});
					uni.hideLoading();
				}, 1200);
			},
		
			register() {
				// this.show = true



				this.show = true;
				this.system_info = uni.getSystemInfoSync(); //屏幕宽高
				this.ww = this.system_info.windowWidth; //准确的宽高
				this.hh = this.system_info.windowHeight;
				var that = this;

				//这里等promise执行，避免拿不到图片临时路径
				const promise1 = new Promise((resolve, reject) => {
					uni.downloadFile({
						url: that.bg_img,
						success: (res) => {
							resolve(res);
						},
					});
				});
				const promise2 = new Promise((resolve, reject) => {
					uni.downloadFile({
						url: that.qrPath,
						success: (res) => {
							resolve(res);
						},
					});
				});
				const promise3 = new Promise((resolve, reject) => {
					uni.downloadFile({
						url: that.vuex_avatar8 ||
							that.bg_img3,
						success: (res) => {
							resolve(res);
						},
					});
				});
				Promise.all([promise1, promise2, promise3]).then((values) => {
					console.log(values, 88888888);
					this.make_canvas(values[0], values[1], values[2]);
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.bgs {
		position: relative;

	}

	.btns {
		margin: 0 auto;
		width: 299rpx;
		height: 75rpx;
		background: linear-gradient(180deg, #E62E15 0%, #F35843 100%);
		border-radius: 68rpx 68rpx 68rpx 68rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}

	.words {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #A42D2D;
		line-height: 40rpx;
		padding: 35rpx;

		>view {
			margin-bottom: 10rpx;
		}

		text {
			color: #FF1A1A;
		}
	}

	.infos1 {
		width: 640rpx;
		position: absolute;
		top: 527rpx;
		left: 55rpx;
		right: 55rpx;
		height: 661rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFEDD5 100%);
		box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.07);
		opacity: 1;
		z-index: 99;

		.line {
			width: 681rpx;
			height: 28rpx;
			position: absolute;
			left: -21rpx;
		}

		.tit2 {
			margin: 32rpx auto;
			width: 211rpx;
			height: 56rpx;
		}
	}

	.desc {
		margin-top: 38rpx;
		font-size: 28rpx;
		font-family: Microsoft Sans Serif-Regular, Microsoft Sans Serif;
		font-weight: 400;
		color: #FFB74A;
		text-align: center;
	}

	.immm {
		// width: 750rpx;
		width: 80%;

		top: 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;

		top: 30px;
		margin: 0 auto;
		
		// height: 1332rpx;
	}

	#sss {
		position: absolute;
		width: 100%;


		/* #ifdef H5 */

		height: 100vh;
		/* #endif */

		
		top: -99999899rpx;
		left: -99999899rpx;
		z-index: 9999;

	}


	img {
		display: block;
		width: 100%;
		height: auto;
	}

	/deep/ .u-drawer-top {
		background: rgba(0, 0, 0, .6) !important;
	}


	.poster {
		width: 100%;
		height: 100vh;
		// margin: 40px auto 0;
	}

	.handle {
		position: fixed;
		top: 60%;
		left: 50%;
		width: 200px;
		height: 200px;
		margin: -100px 0 0 -100px;
		background: rgba(0, 0, 0, 0);
		z-index: 9;
	}
</style>
